<template>
  <div class="map-container">
    <div class="chart-box" ref="chart"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";

let myChart;

const troubleShootList = [
  {
    townCode: "350404",
    townName: "三元区",
    allCount: 68,
    disposalRate: 0.6471,
    completedCount: 44,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350405",
    townName: "沙县区",
    allCount: 28,
    disposalRate: 1.0,
    completedCount: 28,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350421",
    townName: "明溪县",
    allCount: 23,
    disposalRate: 0.9565,
    completedCount: 22,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350423",
    townName: "清流县",
    allCount: 905,
    disposalRate: 0.9989,
    completedCount: 904,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350424",
    townName: "宁化县",
    allCount: 35,
    disposalRate: 0.9143,
    completedCount: 32,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350425",
    townName: "大田县",
    allCount: 41,
    disposalRate: 0.9756,
    completedCount: 40,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350426",
    townName: "尤溪县",
    allCount: 52,
    disposalRate: 1.0,
    completedCount: 52,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350428",
    townName: "将乐县",
    allCount: 116,
    disposalRate: 0.3534,
    completedCount: 41,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350429",
    townName: "泰宁县",
    allCount: 18,
    disposalRate: 1.0,
    completedCount: 18,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350430",
    townName: "建宁县",
    allCount: 21,
    disposalRate: 1.0,
    completedCount: 21,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
  {
    townCode: "350481",
    townName: "永安市",
    allCount: 37,
    disposalRate: 0.9189,
    completedCount: 34,
    mediumRiskCount: 0,
    highRiskCount: 0,
  },
];

export default {
  data() {
    return {
      parentGeoData: {}, // 父级geo数据
      currentGeoData: {}, // 当前geo数据
      mapOptions: {}, // 地图配置
      seriesArr: [
        {
          name: "排查数据",
          type: "map",
          map: "Map",
          roam: true,
          label: {
            show: true,
          },
          itemStyle: {
            normal: {
              areaColor: "inherit", // 取消 hover 效果
              borderWidth: 1,
              borderColor: "#496D7B",
              label: {
                textShadowBlur: 15,
                textShadowColor: "#333",
              },
            },
          },
          data: troubleShootList, // 动态数据放这里
        },
      ],
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
  methods: {
    // 获取父级轮廓数据
    async getParentGeoData() {
      const res = await axios.get(`/mapfile/single/350400-1.geojson`);
      this.parentGeoData = res.data;
      return res;
    },
    // 获取地图数据
    async getCurrentGeoData() {
      const res = await axios.get(`/mapfile/350400.geojson`);
      this.currentGeoData = res.data;
      return res;
    },
    // 初始化图标
    async initChart() {
      Promise.all([this.getParentGeoData(), this.getCurrentGeoData()]).then(
        () => {
          myChart = echarts.init(this.$refs["chart"]);
          this.mapOptions = {
            width: "58%",
            aspectScale: 1.3, // 地图的长宽
            geo: [
              {
                map: "ContourMap",
                name: "地图轮廓",
                roam: false, // 是否可缩放
                // aspectScale: 1.3,
                zoom: 1, // 缩放比例
                z: 1,
                slient: false,
                label: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    areaColor: {
                      type: "radial",
                      x: 0.55,
                      y: 0.15,
                      r: 1.2,
                      colorStops: [
                        {
                          offset: 0.2,
                          color: "rgba(64, 177, 221, 0)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(64, 177, 221, 0.5)", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                    borderColor: "#40B1DD",
                    borderWidth: 1.6,
                    shadowBlur: 35,
                    shadowColor: "rgba(0, 0, 0, 1)",
                    shadowOffsetX: 30,
                    shadowOffsetY: 30,
                    label: {
                      textShadowBlur: 5,
                      textShadowColor: "#000",
                    },
                  },
                  emphasis: {
                    areaColor: "rgba(56, 199, 255, 0.1)",
                    borderColor: "#40B1DD",
                    borderWidth: 1.6,
                    shadowBlur: 35,
                    shadowColor: "rgba(0, 0, 0, 1)",
                    shadowOffsetX: 30,
                    shadowOffsetY: 30,
                    label: {
                      textShadowBlur: 5,
                      textShadowColor: "#000",
                    },
                  },
                },
              },
              {
                map: "Map",
                name: "地图",
                roam: false, // 是否可缩放
                zoom: 1,
                z: 5,
                slient: false,
                label: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    areaColor: "rgba(0, 33, 55, 1)",
                    borderColor: "#496D7B",
                    borderWidth: 1,
                    label: {
                      textShadowBlur: 5,
                      textShadowColor: "#000",
                    },
                  },
                  emphasis: {
                    opacity: 0,
                  },
                },
              },
            ],
            series: this.seriesArr,
          };
          echarts.registerMap("ContourMap", this.parentGeoData);
          echarts.registerMap("Map", this.currentGeoData);
          myChart.setOption(this.mapOptions);
          myChart.off("click");
          myChart.on("click", this.handleClick);
          myChart.off("mouseover");
          myChart.on("mouseover", this.handleMouseover);
          myChart.off("mouseout");
          myChart.on("mouseout", this.handleMouseout);
        }
      );
    },
    resizeChart() {
      if (myChart) {
        myChart.resize();
      }
    },
    // 地图点击事件
    handleClick(params) {
      console.log("handleClick", params);
    },
    // 地图鼠标移入事件
    handleMouseover(params) {
      console.log("handleMouseover", params);
    },
    // 地图鼠标移出事件
    handleMouseout(params) {
      console.log("handleMouseout", params);
    },
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  height: 100%;
  .chart-box {
    height: 100%;
    background: url(~@/assets/images/screen/bg.png) no-repeat center center;
    background-size: cover;
  }
}
</style>
